<template>
  <div>
      <h1>添加地址</h1>
      <div>
        选择省份:
        <select v-model="province">
          <option value="">无</option>
          <option v-for="item in pro_list" :key="item.areaId" :value="item.areaId">{{item.areaName}}</option>
        </select>
        选择城市:
        <select v-model="city">
          <option value="">无</option>
          <option v-for="item in city_list" :key="item.areaId" :value="item.areaId">{{item.areaName}}</option>
        </select>
        选择县区:
        <select v-model="district">
          <option value="">无</option>
          <option v-for="item in dis_list" :key="item.areaId" :value="item.areaId">{{item.areaName}}</option>
        </select>
        详细地址:<input type="text" v-model="place">(要有乡镇/街道 到房屋号)
        收货人:<input type="text" v-model="receiver">
        联系电话:<input type="text" v-model="moblie">
        <input type="button" value="添加" @click="add">
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      province:"",
      city:"",
      district:"",
      provinceName:"",
      cityName:"",
      districtName:"",
      place:"",
      receiver:"",
      moblie:"",
      pro_list:[],
      city_list:[],
      dis_list:[],
    }
  },
  created(){
      //默认 查询 省份信息
    this.axios.get("http://127.0.0.1:8000/city?pid=-1").then(resp=>{
      console.log(resp.data)
      this.pro_list=resp.data
    })
  },
  methods:{
    add(){

      for(let i=0;i<this.pro_list.length;i++){
        if(this.pro_list[i].areaId==this.province){
          this.provinceName=this.pro_list[i].areaName
        }
      }
       for(let i=0;i<this.city_list.length;i++){
        if(this.city_list[i].areaId==this.city){
          this.cityName=this.city_list[i].areaName
        }
      }
       for(let i=0;i<this.dis_list.length;i++){
        if(this.dis_list[i].areaId==this.district){
          this.districtName=this.dis_list[i].areaName
        }
      }

      const token=sessionStorage.getItem("token")

      if(!token){
            alert("没有登录，请先去登录")
            //如果令牌不存在，证明我们没有登录 先去登录
            this.$router.push({"path":"/login","query":{"back":"/cart"}})
            return
        }

      const data={
        "province":this.provinceName,
        "city":this.cityName,
        "district":this.districtName,
        "place":this.place,
        "receiver":this.receiver,
        "moblie":this.moblie,
      }
      this.axios.post("http://127.0.0.1:8000/address",data,{"headers":{"Authorization":token}}).then(resp=>{
            console.log(resp.data)
            alert(resp.data.msg)
         })
    }
  },
  watch: {
      province(val1,val2){
          //监听省的选择
          this.axios.get("http://127.0.0.1:8000/city?pid="+val1).then(resp=>{
            console.log(resp.data)
            this.city_list=resp.data
         })
      },
      city(val1,val2){
          //监听市的选择
          this.axios.get("http://127.0.0.1:8000/city?pid="+val1).then(resp=>{
            console.log(resp.data)
            this.dis_list=resp.data
         })
      }
  },
}
</script>

<style>

</style>